@charset "utf-8";

:root {
    --aside-width: 350px;
    --aside-footer-height: 140px;
    --aside-header-height: 80px;
}

/*============== reset =================*/
body {
    margin: 0
}

a {
    text-decoration: none;
    color: #3b8bba;
}

/*=============== aside ================*/

aside {
    background: rgb(189,189,189);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--aside-width);
    box-sizing: border-box;
}

aside header {
    padding: 1rem;
    position: absolute;
    left: 0;
    top: 0;
    width: var(--aside-width);
    height: var(--aside-header-height);
    box-sizing: border-box;
}

aside menu {
    box-sizing: border-box;
    overflow-y:scroll;
    position: absolute;
    left: 0;
    top: var(--aside-header-height);
    bottom: var(--aside-footer-height);
    width: var(--aside-width);
}

aside footer {
    padding: 1rem;
    position: -webkit-sticky;
    position: absolute;
    bottom: 0;
    left: 0;
    height: var(--aside-footer-height);
    width: var(--aside-width);
    box-sizing: border-box;
}

aside menu ul>li {
    cursor: pointer;
    line-height: 1.5;
}

/*=============== main ================*/

main {
    margin-left: var(--aside-width);
    padding: 1rem;
}

/*=============== .api ================*/

main .api{
    padding:1rem;
    margin:1rem 0rem;
    border:1px solid #eee;
}

.api h3{
    cursor:pointer;
    margin:0rem;
    display:flex;
    align-items:center;
}

.api h4{
    font-size:1.1rem;
    margin-bottom:.2rem;
    border-bottom:1px solid #eee;
    padding-bottom:.2rem;
}

.api h5{
    margin:.8rem 0rem .2rem 0rem;
    font-size:1rem;
}

.api h3 .method{
    width:5rem;
    font-weight:bold;
    text-transform:uppercase;
}

.api h3 .get{
    color:green;
}

.api h3 .options{
    color:green;
}

.api h3 .delete{
    color:red;
}

.api h3 .put,.api h3 .patch{
    color:rgb(193,174,49);
}

.api h3 .post{
    color:rgb(240,114,11);
}

.api h3 .url{
    margin-right:2rem;
}

.api h4 .success{
    color:green;
    margin-right:1rem;
}

.api h4 .error{
    color:red;
    margin-right:1rem;
}

.api table{
    text-align:left;
    border-collapse:collapse;
    border:1px solid #ddd;
}

.api table thead tr{
    background:#eee;
}

.api table tr{
    border-bottom:1px solid #ddd;
    line-height:1.5rem;
}

.api table tbody th .parent{
    color:#ccc;
}

.api table th, .api table td{
    padding:.3rem 1rem;
}

